<template>
  <div class="inputLine">
    <span>所在区域</span>
    <select name="" v-model="countryName" @change="selectCountry">
      <option :value="item" v-for="(item,index) in area">
        {{item.country}}
        <svg class="icon icon-arrow-bottom" aria-hidden="true">
          <use xlink:href="#icon-arrow-bottom"></use>
        </svg>
      </option>
    </select>
    <select name="" v-model="level2">
      <option :value="item" v-for="(item,index) in countryName.city">
        {{item}}
        <svg class="icon icon-arrow-bottom" aria-hidden="true">
          <use xlink:href="#icon-arrow-bottom"></use>
        </svg>
      </option>
    </select>
  </div>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
export default {
  components: {
    // empty
  },
  data() {
    return {
      list: [{
        text: '这是第1条数据'
      }],
      UniversityList: [],
      schoolList: [],
      countryName: {},
      level2: '请选择城市',
      area: [{
        'country': '美国',
        'city': [
          '纽约',
          '洛杉矶',
          '旧金山',
          '西雅图',
          '波士顿',
          '休斯顿',
          '圣地亚哥',
          '芝加哥',
          '其它'
        ]
      },
      {
        'country': '加拿大',
        'city': [
          '温哥华',
          '多伦多',
          '蒙特利尔',
          '其它'
        ]
      },
      {
        'country': '澳大利亚',
        'city': [
          '悉尼',
          '墨尔本',
          '其它'
        ]
      },
      {
        'country': '新加坡',
        'city': [
          '新加坡'
        ]
      }

      ]
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  async mounted() {

  },
  methods: {
    selectCountry(value) {
      this.level2 = this.countryName.city[0];
    }
  }
};

</script>
<style lang="less" scoped="true">
</style>
